/**
 * Created by HAO on 2/11/2018.
 * Brief   :
 */

const maxAngle = 5 // 搓牌角度

cc.Class({
  extends: cc.Component,

  properties: {

    rootNode: cc.Node,

    poker: cc.Node,
    pokerMask: cc.Mask,
    maskBgNode: cc.Mask,
    bgNode: cc.Node,

    shadowNode1: cc.Sprite,	// 阴影
    shadowNode2: cc.Sprite,

    spriteFrameList: [cc.SpriteFrame],	// 遮罩
    shadowSpriteFrameList: [cc.SpriteFrame],	// 横竖阴影

    _rotate: 0,

    _direction: 1,	// 左下右下

    _isLandscape: true,	// 是否为横向
    _isAnimBol: false,	// 是否达到翻牌的要求
    _isTouch: true,	// 是否开启触摸
    _isRollback: false,	// 是否回滚到了初始状态
    _isAnimDone: false,	// 翻拍动作是否完成

    _offPos: 0
  },

  // use this for initialization
  onLoad: function () {
    this.node.on(cc.Node.EventType.TOUCH_START, this.onStart, this)
    this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onMove, this)
    this.node.on(cc.Node.EventType.TOUCH_END, this.onEnd, this)
    this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onCancel, this)

    this.m_LastPos = 0
    this.Wsize = cc.winSize;
    this.nodeW = this.poker.width
    this.nodeH = this.poker.height
  },

  onStart: function (event) {
    this._isRollback = false
    this.m_LastPos = event.touch.getLocation()

    this._direction = (this.m_LastPos.x <= this.Wsize.width / 2)

    if (this.m_LastPos.x < this.Wsize.width / 3) {
      this._direction = 0
    } else if (this.m_LastPos.x > this.Wsize.width * 2 / 3) {
      this._direction = 2
    } else {
      this._direction = 1
    }
  },

  onMove: function (event) {
    if (this._isTouch == false) return	// 是否禁用触摸

    this._isRollback = false

    var pos = event.touch.getLocation()
    var y = pos.y - this.m_LastPos.y

    var showMaskPos = (this._isLandscape == true) ? this.pokerMask.node.y : this.pokerMask.node.x;
    var limit = (this._isLandscape == true) ? 450 : 600
    if (showMaskPos > limit) {
      this._isAnimBol = true
      this.openAnimation()	// 达到指定位置，开牌
      return
    } else this._isAnimBol = false

    this.updatePosition(y)

    this.m_LastPos = pos
  },

  onEnd: function (evt) {
    if (this._isAnimBol == false) {	// 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态
      this._isRollback = (this.pokerMask.node.y != 0 || this.pokerMask.node.x != 0)	// 开启回滚定时器
    }
  },

  onCancel: function (evt) {
    if (this._isAnimBol == false) {	// 结束触摸事件时，如果没触发翻牌事件，则回滚到初始状态
      this._isRollback = true	// 开启回滚定时器
    }
  },

  updatePosition: function (y) {
    this._offPos += y
    this._offPos = this._offPos < 0 ? 0 : this._offPos

    var showMaskPos = this._isLandscape == true ? this.pokerMask.node.y : this.pokerMask.node.x

    var ratio = this.getScaleRatio(showMaskPos)	// 缩放比例
    var angle = this.getAngle(showMaskPos - 20)	// 旋转比例
    var opacity = this.getOpacity(showMaskPos)
    this.shadowNode1.node.opacity = opacity
    this.shadowNode2.node.opacity = opacity

    if (showMaskPos > 30) {
      if (this._isLandscape == true) {
        this.pokerMask.spriteFrame = this.spriteFrameList[0]
        this.maskBgNode.spriteFrame = this.spriteFrameList[0]
      } else {
        this.pokerMask.spriteFrame = this.spriteFrameList[2]
        this.maskBgNode.spriteFrame = this.spriteFrameList[2]
      }
    } else {
      this.pokerMask.spriteFrame = this.spriteFrameList[1]
      this.maskBgNode.spriteFrame = this.spriteFrameList[1]
    }

    if (this._isLandscape == true) {
      this.pokerMask.node.setScale(ratio, 1)
      this.shadowNode2.node.setScale(ratio, 1)

      if (this._direction == 0) {	// 左
        this.poker.skewX = -angle
        this.poker.angle = angle
      } else if (this._direction == 1) {	// 中
        this.poker.skewX = 0
        this.poker.angle = 0
      } else {	// 右
        this.poker.skewX = angle
        this.poker.angle = -angle
      }

      if (this.pokerMask.node.y < 0) {
        this.pokerMask.node.y = 0;
        this._isRollback = false
      } else {
        this.pokerMask.node.y += y
      }

      if (this.poker.y < -this.nodeH) {
        this.poker.y = -this.nodeH;
      } else {
        this.poker.y += y
      }

      if (this.maskBgNode.node.y < 0) {
        this.maskBgNode.node.y = 0;
      } else {
        this.maskBgNode.node.y += y
      }

      if (this.bgNode.y > 0) {
        this.bgNode.y = 0;
      } else {
        this.bgNode.y -= y
      }

      if (this.shadowNode1.node.y < 0) {
        this.shadowNode1.node.y = 0;
      } else {
        this.shadowNode1.node.y += y * 1.6
      }

      if (this.shadowNode2.node.y < 0) {
        this.shadowNode2.node.y = 0;
      } else {
        this.shadowNode2.node.y += y
      }
    } else {
      this.pokerMask.node.setScale(1, ratio)
      this.shadowNode2.node.setScale(1, ratio)

      if (this._direction == 0) {	// 左
        this.poker.skewY = angle
        this.poker.angle = angle
      } else if (this._direction == 1) {	// 中
        this.poker.skewY = 0
        this.poker.angle = 0
      } else {	// 右
        this.poker.skewY = -angle
        this.poker.angle = -angle
      }

      if (this.pokerMask.node.x < 0) {
        this.pokerMask.node.x = 0;
        this._isRollback = false
      } else {
        this.pokerMask.node.x += y
      }

      if (this.poker.x < -this.nodeW) {
        this.poker.x = -this.nodeW
      } else {
        this.poker.x += y
      }

      if (this.maskBgNode.node.x < 0) {
        this.maskBgNode.node.x = 0;
      } else {
        this.maskBgNode.node.x += y
      }

      if (this.bgNode.x > 0) {
        this.bgNode.x = 0;
      } else {
        this.bgNode.x -= y
      }

      if (this.shadowNode1.node.x < 0) {
        this.shadowNode1.node.x = 0;
      } else {
        this.shadowNode1.node.x += y * 1.6
      }

      if (this.shadowNode2.node.x < 0) {
        this.shadowNode2.node.x = 0;
      } else {
        this.shadowNode2.node.x += y
      }
    }
  },

  getOpacity: function (posY) {
    posY = posY < 0 ? 0 : posY
    var w = (this._isLandscape == true) ? this.nodeH : this.nodeW
    var temp = (posY / w) * 255 * 2
    temp = temp > 255 ? 255 : temp
    return temp
  },

  getAngle: function (posY) {
    posY = posY < 0 ? 0 : posY
    var w = (this._isLandscape == true) ? this.nodeH : this.nodeW
    var temp = (posY * 2 / w) * maxAngle
    temp = temp > maxAngle ? maxAngle : temp
    return temp
  },

  getScaleRatio: function (posY) {
    posY = posY < 0 ? 0 : posY
    var temp = (posY / (this.nodeH * 5)) + 1
    temp = temp < 1 ? 1 : temp
    return temp
  },

  // 开牌按钮
  onClickOpenBtn: function (evn, type) {
    this.openAnimation()
  },

  // 旋转按钮
  onClickRotateBtn: function (evn, type, _rotate) {
    var scale = 1
    var offtime = 0
    if (_rotate != null) { // 复原
      this._rotate = _rotate
    } else {	// 旋转
      if (this._rotate == 0) {
        scale = 0.85
        this._rotate = -90
      } else {
        scale = 1
        this._rotate = 0
      }
      offtime = 0.5
    }

    let self = this
    this._isTouch = false
    this.rootNode.runAction(
      cc.sequence(
        cc.spawn(
          cc.scaleTo(offtime, scale, scale),
          cc.rotateTo(offtime, this._rotate, this._rotate)
        ),
        cc.callFunc(function () { // 开启旋转后，禁用触摸
          self._isTouch = true
        })
      )
    )

    if (this._rotate == 0) {
      this.shadowNode1.spriteFrame = this.shadowSpriteFrameList[0]
      this.shadowNode2.spriteFrame = this.shadowSpriteFrameList[0]
    } else if (this._rotate == -90) {
      this.shadowNode1.spriteFrame = this.shadowSpriteFrameList[1]
      this.shadowNode2.spriteFrame = this.shadowSpriteFrameList[1]
    }

    if (this._isAnimDone == false) {	// 设置横竖方向
      if (this._rotate == 0) {
        this._isLandscape = true
        this.initPosition(0, -(this.nodeH))
      } else if (this._rotate == -90) {
        this._isLandscape = false
        this.initPosition(-this.nodeW, 0)
      }
    } else {
      this.poker.setPosition(0, 0)
      this.pokerMask.node.setPosition(0, 0)
      this.maskBgNode.node.setPosition(0, 0)
      this.bgNode.setPosition(0, 0)
    }
  },

  // 开牌动画
  openAnimation: function () {
    this._isTouch = false
    this._isAnimDone = true
    this._isAnimBol = true

    this.initPosition(0, 0)
    this.pokerMask.node.setScale(1.2)
    this.pokerMask.node.runAction(
      cc.sequence(
        cc.scaleTo(0.2, 1, 1).easing(cc.easeBackInOut(0.5)),
        cc.callFunc(function () {
          // if (self.cardCellJS) self.cardCellJS.fadeInNum()
        }),
        cc.delayTime(1)
      )
    )
  },

  initPosition: function (x, y) {
    this.poker.setPosition(x, y)

    this.pokerMask.node.setPosition(0, 0)
    this.maskBgNode.node.setPosition(0, 0)
    this.bgNode.setPosition(0, 0)
    this.shadowNode1.node.setPosition(0, 0)
    this.shadowNode2.node.setPosition(0, 0)

    this.poker.skewX = 0
    this.poker.skewY = 0
    this.poker.angle = 0
    this.shadowNode1.node.opacity = 0
    this.shadowNode2.node.opacity = 0

    this.pokerMask.spriteFrame = this.spriteFrameList[1]
    this.maskBgNode.spriteFrame = this.spriteFrameList[1]
  },

  update: function (dt) {
    // 回滚到初始位置
    if (this._isRollback == true && this._isAnimDone == false) this.updatePosition(-20)
  },

  onSetNodeVisible: function (_isShow) {
    _isShow = (_isShow == null || _isShow == undefined) ? false : _isShow
    this.node.active = _isShow
  }
})
